<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
<!-- qtquick-creating.qdoc -->
  <title>Creating Qt Quick Projects | Qt Creator Manual</title>
  <link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
  <script type="text/javascript">
    document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
    // loading style sheet breaks anchors that were jumped to before
    // so force jumping to anchor again
    setTimeout(function() {
        var anchor = location.hash;
        // need to jump to different anchor first (e.g. none)
        location.hash = "#";
        setTimeout(function() {
            location.hash = anchor;
        }, 0);
    }, 0);
  </script>
</head>
<body>
<div class="header" id="qtdocheader">
  <div class="main">
    <div class="main-rounded">
      <div class="navigationbar">
        <table><tr>
<td ><a href="index.html">Qt Creator Manual</a></td><td >Creating Qt Quick Projects</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right"><a href="index.html">Qt Creator Manual 4.11.1</a></td>
        </tr></table>
      </div>
    </div>
<div class="content">
<div class="line">
<div class="content mainContent">
  <link rel="prev" href="creator-visual-editor.html" />
  <link rel="next" href="creator-using-qt-quick-designer.html" />
<p class="naviNextPrevious headerNavi">
<a class="prevPage" href="creator-visual-editor.html">Developing Qt Quick Applications</a>
<span class="naviSeparator">  &#9702;  </span>
<a class="nextPage" href="creator-using-qt-quick-designer.html">Editing QML Files in Design Mode</a>
</p><p/>
<div class="sidebar">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#creating-empty-qt-quick-applications">Creating Empty Qt Quick Applications</a></li>
<li class="level1"><a href="#creating-qt-quick-controls-applications">Creating Qt Quick Controls Applications</a></li>
<li class="level1"><a href="#creating-qt-quick-ui-projects">Creating Qt Quick UI Projects</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">Creating Qt Quick Projects</h1>
<span class="subtitle"></span>
<!-- $$$quick-projects.html-description -->
<div class="descr"> <a name="details"></a>
<p class="centerAlign"><img src="images/qmldesigner-new-project.png" alt="&quot;New File or Project dialog&quot;" /></p><p>When you create a new Qt Quick project from scratch, you have the following options:</p>
<ul>
<li><b>Qt Quick Application - Empty</b> creates a Qt Quick 2 application project that can contain both QML and C++ code. You can build the application and deploy it to desktop, embedded, and mobile target platforms.</li>
<li><b>Qt Quick Application - Scroll</b> uses the <a href="http://doc.qt.io/qt-5/qml-qtquick-controls2-scrollview.html">ScrollView</a> type to implement a scrollable list view (requires Qt 5.9 or later).</li>
<li><b>Qt Quick Application - Stack</b> uses the <a href="http://doc.qt.io/qt-5/qml-qtquick-controls2-stackview.html">StackView</a> type to implement a set of pages with a stack-based navigation model (requires Qt 5.7 or later).</li>
<li><b>Qt Quick Application - Swipe</b> uses the <a href="http://doc.qt.io/qt-5/qml-qtquick-controls2-swipeview.html">SwipeWiew</a> type to implement a set of pages with a swipe-based navigation model (requires Qt 5.7 or later).</li>
<li><b>Qt Quick UI Prototype</b> (in the <b>Other Project</b> category) creates a <a href="quick-projects.html#creating-qt-quick-ui-projects">Qt Quick UI project</a> with a single QML file that contains the main view. You can review Qt Quick 2 UI projects in the <a href="creator-editor-external.html#previewing-qml-files">QML Scene preview tool</a>. You do not need to build them, because they do not contain any C++ code. Use this only if you are prototyping. You cannot create a full application with this.<p>Qt Quick UI projects cannot be deployed to embedded or mobile target platforms. For those platforms, create a Qt Quick application instead.</p>
</li>
<li><b>Qt Quick 2 Extension Plugin</b> (in the <b>Library</b> category) create C++ plugins that make it possible to offer extensions that can be loaded dynamically into Qt Quick 2 applications.</li>
</ul>
<p><b>Note: </b>The SDK for a particular target platform might install additional templates for that platform. For example, the QNX templates are installed as part of the QNX SDK.</p><p>Qt Creator creates the necessary boilerplate files. Some of the files are specific to a particular target platform.</p>
<a name="creating-empty-qt-quick-applications"></a>
<h2 id="creating-empty-qt-quick-applications">Creating Empty Qt Quick Applications</h2>
<ol class="1" type="1"><li>Select <b>File</b> &gt; <b>New File or Project</b> &gt; <b>Application</b> &gt; <b>Qt Quick Application - Empty</b> &gt; <b>Choose</b>.</li>
<li>In the <b>Name</b> field, enter a name for the application.</li>
<li>In the <b>Create in</b> field, enter the path for the project files, and then select <b>Next</b> (or <b>Continue</b> on <a href="nolink">macOS</a>).</li>
<li>In the <b>Build system</b> field, select the build system to use for building and running the project: <a href="http://doc.qt.io/qt-5/qmake-manual.html">qmake</a>, <a href="creator-project-cmake.html">CMake</a>, or <a href="creator-project-qbs.html">Qbs</a>.</li>
<li>Select <b>Next</b>.</li>
<li>Select the Qt version to develop with in the <b>Minimal required Qt version</b> field. The Qt version determines the Qt Quick imports that are used in the QML files.</li>
<li>Select the <b>Use Qt Virtual Keyboard</b> check box to add support for <a href="http://doc.qt.io/qt-5/qtvirtualkeyboard-index.html">Qt Virtual Keyboard</a> to the application.<p><b>Note: </b>If you have not installed the Qt Virtual Keyboard module when you installed Qt, an error message will appear when you try to open the <i>main.qml</i> in the <b>Form Editor</b> in the Design mode. You can use the <a href="http://doc.qt.io/qt-5/integrity-building-qt-for-imx6quad-board.html#installing-qt">Qt Maintenance Tool</a> to install Qt Virtual Keyboard.</p></li>
<li>Select <b>Next</b>.</li>
<li>In the <b>Language</b> field, select a language that you plan to <a href="creator-editor-external.html#using-qt-linguist">translate</a> the application to. You can add other languages later by editing the project file.</li>
<li>In the <b>Translation file</b> field, you can edit the name for the translation source file that will be generated for the selected language.</li>
<li>Select <b>Next</b>.</li>
<li>Select <a href="creator-glossary.html#glossary-buildandrun-kit">kits</a> for running and building your project, and then click <b>Next</b>.<p><b>Note: </b>Kits are listed if they have been specified in <b>Tools</b> &gt; <b>Options</b> &gt; <b>Kits</b>.</p></li>
<li>Review the project settings, and click <b>Finish</b> (on Windows and Linux) or <b>Done</b> (on <a href="nolink">macOS</a>) to create the project.</li>
</ol>
<p>Qt Creator generates a QML file, <i>main.qml</i>, that you can modify in the Design mode.</p>
<a name="creating-qt-quick-controls-applications"></a>
<h2 id="creating-qt-quick-controls-applications">Creating Qt Quick Controls Applications</h2>
<ol class="1" type="1"><li>Select <b>File</b> &gt; <b>New File or Project</b> &gt; <b>Application</b> &gt; <b>Qt Quick Application - Scroll</b>, <b>Qt Quick Application - Stack</b>, or <b>Qt Quick Application - Swipe</b> &gt; <b>Choose</b>.</li>
<li>In the <b>Name</b> field, enter a name for the application.</li>
<li>In the <b>Create in</b> field, enter the path for the project files, and then select <b>Next</b> (or <b>Continue</b> on <a href="nolink">macOS</a>).</li>
<li>In the <b>Build system</b> field, select the build system to use for building and running the project: <a href="http://doc.qt.io/qt-5/qmake-manual.html">qmake</a>, <a href="creator-project-cmake.html">CMake</a>, or <a href="creator-project-qbs.html">Qbs</a>.</li>
<li>In the <b>Qt Quick Controls Style</b> field, select one of the predefined <a href="http://doc.qt.io/qt-5/qtquickcontrols2-styles.html">UI styles</a> to use, and then select <b>Next</b>.</li>
<li>Select the <b>Use Qt Virtual Keyboard</b> check box to add support for <a href="http://doc.qt.io/qt-5/qtvirtualkeyboard-index.html">Qt Virtual Keyboard</a> to the application.</li>
<li>Select <a href="creator-glossary.html#glossary-buildandrun-kit">kits</a> for the platforms that you want to build the application for. To build applications for mobile devices, select kits for Android ARM and iPhone OS, and click <b>Next</b>.<p><b>Note: </b>Kits are listed if they have been specified in <b>Tools</b> &gt; <b>Options</b> &gt; <b>Kits</b> (on Windows and Linux) or in <b>Qt Creator</b> &gt; <b>Preferences</b> &gt; <b>Kits</b> (on <a href="nolink">macOS</a>).</p></li>
<li>Select <b>Next</b>.</li>
<li>Review the project settings, and click <b>Finish</b> (or <b>Done</b> on <a href="nolink">macOS</a>).</li>
</ol>
<p>For the Scroll application, Qt Creator creates a QML file, <i>main.qml</i>, that you can modify in the Design mode.</p>
<p>For the Stack and Swipe applications, Qt Creator generates two UI files, <i>Page1Form.ui.qml</i> and <i>Page2Form.ui.qml</i>, that you can modify in the <b>Form Editor</b> and a QML file, <i>main.qml</i>, that you can modify in the <b>Text Editor</b> to add the application logic.</p>
<a name="creating-qt-quick-ui-projects"></a>
<h2 id="creating-qt-quick-ui-projects">Creating Qt Quick UI Projects</h2>
<p>Qt Quick UI projects are useful for testing or prototyping user interfaces, or for setting up a separate project just for QML editing, for example. You cannot use them for application development, because they do not contain:</p>
<ul>
<li>C++ code</li>
<li>Resource files (.qrc)</li>
<li>Code needed for deploying applications to <a href="creator-glossary.html#glossary-device">devices</a></li>
</ul>
<p>To create a Qt Quick UI project:</p>
<ol class="1" type="1"><li>Select <b>File</b> &gt; <b>New File or Project</b> &gt; <b>Other Project</b> &gt; <b>Qt Quick UI Prototype</b> &gt; <b>Choose</b>.</li>
<li>In the <b>Minimal required Qt version</b> field, select the Qt version to develop with. The Qt version determines the Qt Quick imports that are used in the QML files.<p>You can add imports later to combine Qt Quick basic types with Qt Quick Controls, Qt Quick Dialogs, and Qt Quick Layouts (available since Qt 5.1).</p>
</li>
<li>Select the <b>Use Qt Virtual Keyboard</b> check box to add support for <a href="http://doc.qt.io/qt-5/qtvirtualkeyboard-index.html">Qt Virtual Keyboard</a> to the application.</li>
<li>Select <b>Next</b> (or <b>Continue</b> on <a href="nolink">macOS</a>).</li>
<li>Review the project settings, and click <b>Finish</b> (on Windows and Linux) or <b>Done</b> (on <a href="nolink">macOS</a>) to create the project.</li>
</ol>
<p>Qt Creator creates the following files:</p>
<ul>
<li>.qmlproject project file defines that all QML, JavaScript, and image files in the project folder belong to the project. Therefore, you do not need to individually list all the files in the project.</li>
<li>.qml file defines an UI item, such as a component or the whole application UI.</li>
<li>ui.qml file defines a form for the application UI. This file is created if you selected the <b>With .ui.qml file</b> check box.</li>
</ul>
<p>To use JavaScript and image files in the application, copy them to the project folder.</p>
</div>
<!-- @@@quick-projects.html -->
<p class="naviNextPrevious footerNavi">
<a class="prevPage" href="creator-visual-editor.html">Developing Qt Quick Applications</a>
<span class="naviSeparator">  &#9702;  </span>
<a class="nextPage" href="creator-using-qt-quick-designer.html">Editing QML Files in Design Mode</a>
</p>
        </div>
       </div>
   </div>
   </div>
</div>
<div class="footer">
   <p>
   <acronym title="Copyright">&copy;</acronym> 2019 The Qt Company Ltd.
   Documentation contributions included herein are the copyrights of
   their respective owners.<br>    The documentation provided herein is licensed under the terms of the    <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation    License version 1.3</a> as published by the Free Software Foundation.<br>    Qt and respective logos are trademarks of The Qt Company Ltd.     in Finland and/or other countries worldwide. All other trademarks are property
   of their respective owners. </p>
</div>
</body>
</html>
